//找到输入框   核按钮
var input = document.getElementsByTagName('input')[0];
var button = document.getElementsByTagName('button')[0];

var count = 0;
button.onclick = function(){	
//console.log('我们聊天吧');
count ++ ;
console.log(count);
//获得用户输入的值 
var message = input.value;	
console.log(message);

//2、在conntainer 显示用户输入
var cell = document.createElement('div');
//cell.style.overflowX  = 'both';
//找到容器标签
var container = document.getElementsByClassName('container')[0];
//把这个格添加到容器中
container.appendChild(cell);

//创建图像 添加一个
var img = document.createElement('img');
//img.setAttribute('src','../red1/i-mihome_c836072.png')
img.src = count%2==0 ?'../red1/01.png':'../red1/02.png';
img.style.width = '40px';
img.style.height = '40px';
img.style.borderRadius = '20px';
img.style.float = count%2==0 ?'left':'right';
cell.appendChild(img);
//console.log()

//2.4展示文本内容
var contentdiv = document.createElement('div');
contentdiv.innerHTML = message;
contentdiv.style.paddingTop = '40px';
contentdiv.style.maxWidth = 'calc(100% - 50px)';
contentdiv.style.wordWrap = 'break-word';
contentdiv.style.float = count%2==0 ?'left':'right';

cell.appendChild(contentdiv);
//2.5清除浮动    by添加空的标签
var clearDiv = document.createElement('div');
clearDiv.style.clear = 'both';
cell.appendChild(clearDiv);


//清空输入框
input.value = ' ';
//让内容container 滚动到最大值
//scrollTo让标签滚动到某个位置
//para1 x方向滚动到哪里
//para1 y方向滚动到哪里
//container.scrollHeight滚动的真实高度
//console.log(container);
container.scrollTo(0,container.scrollHeight);
}